<template>
	<view class="result-container" :style="containerStyle">
		<!-- 顶部导航栏 -->
		<view class="top-nav" :style="{ top: safeDistance + 'px' }">
			<view class="back-button" @click="handleGoBack">
				<text class="back-icon">←</text>
			</view>
			<view class="test-tab-button" @click="handleBackToTestTab">
				<text class="tab-icon">📝</text>
			</view>
		</view>

		<!-- 结果卡片 -->
		<view class="result-card">
			<!-- 成绩图标 -->
			<view class="score-icon">
				<text class="icon-text">{{ scoreEmoji }}</text>
			</view>

			<!-- 分数 -->
			<view class="score-section">
				<text class="score-label">您的得分</text>
				<text class="score-value">{{ score }}</text>
				<text class="score-unit">分</text>
			</view>

			<!-- 评价 -->
			<text class="score-comment">{{ scoreComment }}</text>

			<!-- 统计信息 -->
			<view class="stats-grid">
				<view class="stat-item">
					<text class="stat-icon">✅</text>
					<text class="stat-value">{{ correctCount }}</text>
					<text class="stat-label">答对</text>
				</view>
				<view class="stat-item">
					<text class="stat-icon">❌</text>
					<text class="stat-value">{{ wrongCount }}</text>
					<text class="stat-label">答错</text>
				</view>
				<view class="stat-item">
					<text class="stat-icon">📊</text>
					<text class="stat-value">{{ accuracy }}%</text>
					<text class="stat-label">正确率</text>
				</view>
				<view class="stat-item">
					<text class="stat-icon">⏱</text>
					<text class="stat-value">{{ formatTime(timeUsed) }}</text>
					<text class="stat-label">用时</text>
				</view>
			</view>

			<!-- 进度环 -->
			<view class="progress-ring">
				<view class="ring-bg"></view>
				<view class="ring-fill" :style="{ transform: `rotate(${(accuracy / 100) * 360}deg)` }"></view>
				<view class="ring-center">
					<text class="ring-text">{{ accuracy }}%</text>
				</view>
			</view>
		</view>

		<!-- 历史统计卡片 -->
		<view class="history-stats-card" v-if="techStatistics.totalCount > 0">
			<view class="stats-card-header">
				<text class="stats-card-title">📈 历史统计</text>
			</view>

			<!-- 技术栈统计 -->
			<view class="tech-stats-section">
				<view class="tech-stat-row">
					<text class="tech-stat-label">本技术栈测试次数</text>
					<text class="tech-stat-value">{{ techStatistics.totalCount }}次</text>
				</view>
				<view class="tech-stat-row">
					<text class="tech-stat-label">历史平均分</text>
					<text class="tech-stat-value" :class="scoreCompareClass">
						{{ techStatistics.averageScore }}分
						<text class="compare-text" v-if="scoreDiff !== 0">
							{{ scoreDiff > 0 ? '↑' : '↓' }}{{ Math.abs(scoreDiff) }}
						</text>
					</text>
				</view>
				<view class="tech-stat-row" v-if="techStatistics.lastScore !== null">
					<text class="tech-stat-label">上次得分</text>
					<text class="tech-stat-value" :class="progressClass">
						{{ techStatistics.lastScore }}分
						<text class="progress-text" v-if="scoreProgress !== 0">
							{{ scoreProgress > 0 ? '↑' : '↓' }}{{ Math.abs(scoreProgress) }}
						</text>
					</text>
				</view>
				<view class="tech-stat-row">
					<text class="tech-stat-label">历史最高分</text>
					<text class="tech-stat-value highlight">
						{{ techStatistics.bestScore }}分
						<text class="new-record" v-if="isNewRecord">🎉 新纪录</text>
					</text>
				</view>
			</view>

			<!-- 排名信息 -->
			<view class="rank-section" v-if="rankInfo.total > 1">
				<view class="rank-badge">
					<text class="rank-label">本次排名</text>
					<text class="rank-value">第{{ rankInfo.rank }}名</text>
					<text class="rank-total">/ {{ rankInfo.total }}次</text>
				</view>
				<view class="percentile-info">
					<text class="percentile-text">超过{{ rankInfo.percentile }}%的历史记录</text>
				</view>
			</view>
		</view>

		<!-- 题目概览卡片 -->
		<view class="questions-overview-card" v-if="questionResults.length > 0">
			<view class="stats-card-header">
				<text class="stats-card-title">📋 题目概览</text>
				<text class="overview-summary">共{{ totalCount }}题，答对{{ correctCount }}题，答错{{ wrongCount }}题</text>
			</view>
			<view class="questions-list">
				<view v-for="(result, index) in questionResults" :key="result.questionId" class="question-item"
					:class="{ 'question-correct': result.isCorrect, 'question-wrong': !result.isCorrect }">
					<view class="question-item-header">
						<view class="question-number">
							<text class="number-text">{{ index + 1 }}</text>
						</view>
						<view class="question-status-icon">
							<text class="status-icon">{{ result.isCorrect ? '✅' : '❌' }}</text>
						</view>
						<view class="question-content">
							<text class="question-text">{{ result.question }}</text>
						</view>
					</view>
					<view class="question-answers" v-if="!result.isCorrect">
						<view class="answer-row">
							<text class="answer-label">您的答案：</text>
							<view class="answer-tags">
								<text v-for="(ans, idx) in result.userAnswer" :key="idx" class="answer-tag wrong-tag">{{
									ans }}</text>
								<text v-if="result.userAnswer.length === 0" class="answer-tag no-answer">未作答</text>
							</view>
						</view>
						<view class="answer-row">
							<text class="answer-label">正确答案：</text>
							<view class="answer-tags">
								<text v-for="(ans, idx) in result.correctAnswer" :key="idx"
									class="answer-tag correct-tag">{{ ans }}</text>
							</view>
						</view>
					</view>
					<view class="question-answers" v-else>
						<view class="answer-row">
							<text class="answer-label">您的答案：</text>
							<view class="answer-tags">
								<text v-for="(ans, idx) in result.userAnswer" :key="idx"
									class="answer-tag correct-tag">{{ ans }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 趋势分析卡片 -->
		<view class="trend-card" v-if="recentScores.length > 1">
			<view class="stats-card-header">
				<text class="stats-card-title">📊 最近趋势</text>
			</view>
			<view class="trend-content">
				<text class="trend-label">最近{{ recentScores.length }}次测试分数</text>
				<view class="trend-bars">
					<view v-for="(s, index) in recentScores" :key="index" class="trend-bar-item">
						<view class="trend-bar-wrapper">
							<view class="trend-bar" :class="{ 'trend-bar-current': index === 0 }"
								:style="{ height: (s / 100) * 100 + '%' }"></view>
						</view>
						<text class="trend-bar-value">{{ s }}</text>
						<text class="trend-bar-label">{{ index === 0 ? '本次' : `第${recentScores.length - index}次`
							}}</text>
					</view>
				</view>
				<view class="trend-summary" v-if="trendDirection !== TrendDirection.STABLE">
					<text class="trend-summary-text" :class="trendDirection === TrendDirection.UP ? 'trend-up' : 'trend-down'">
						{{ trendDirection === TrendDirection.UP ? '📈 成绩呈上升趋势' : '📉 成绩呈下降趋势' }}
					</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="action-btn secondary-btn" @click="handleBackToList">
				<text class="btn-icon">📋</text>
				<text class="btn-text">返回列表</text>
			</button>
			<button class="action-btn primary-btn" @click="handleRetry">
				<text class="btn-icon">🔄</text>
				<text class="btn-text">再测一次</text>
			</button>
		</view>

		<!-- 鼓励文字 -->
		<view class="encouragement">
			<text class="encouragement-text">{{ encouragementText }}</text>
		</view>
	</view>
</template>

<script setup lang="ts">

// 导入依赖
import { onLoad } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
import { getExamRecordsAPI, getExamStatisticsAPI } from '@/services/exam-records';
import { getThemeStyles } from '@/stores/theme';
import { getScoreLevelConfig, TrendDirection } from '@/types';

// 响应式数据定义
const score = ref(0);
const correctCount = ref(0);
const totalCount = ref(0);
const accuracy = ref(0);
const timeUsed = ref(0);
const techCode = ref('');
const categories = ref('');

// 题目答题结果
const questionResults = ref<Array<{
	questionId: number;
	question: string;
	isCorrect: boolean;
	userAnswer: string[];
	correctAnswer: string[];
}>>([]);

// 后台数据
const examRecords = ref<any[]>([]);
const examStatistics = ref<any>({
	totalCount: 0,
	averageScore: 0,
	bestScore: 0,
	averageAccuracy: 0
});
const loading = ref(false);

// 技术栈统计信息
const techStatistics = computed(() => {
	return {
		totalCount: examStatistics.value.totalCount || 0,
		averageScore: examStatistics.value.averageScore || 0,
		averageAccuracy: examStatistics.value.averageAccuracy || 0,
		bestScore: examStatistics.value.bestScore || 0,
		lastScore: examRecords.value.length > 1 ? examRecords.value[1].score : null
	};
});

// 排名信息
const rankInfo = computed(() => {
	if (!Array.isArray(examRecords.value) || examRecords.value.length === 0) {
		return { rank: 1, total: 1, percentile: 100 };
	}

	try {
		const sortedScores = examRecords.value
			.filter(r => r && typeof r.score === 'number')
			.map(r => r.score)
			.sort((a, b) => b - a);

		if (sortedScores.length === 0) {
			return { rank: 1, total: 1, percentile: 100 };
		}

		const rank = sortedScores.findIndex(s => s <= score.value) + 1;
		const total = sortedScores.length;
		const percentile = total > 0 ? Math.round(((total - rank) / total) * 100) : 100;

		return { rank, total, percentile };
	} catch (error) {
		console.error('计算排名信息失败:', error);
		return { rank: 1, total: 1, percentile: 100 };
	}
});

// 与历史平均分的对比
const scoreDiff = computed(() => {
	return score.value - techStatistics.value.averageScore;
});

// 与上次测试的进步
const scoreProgress = computed(() => {
	if (techStatistics.value.lastScore === null) {
		return 0;
	}
	return score.value - techStatistics.value.lastScore;
});

// 是否创造新纪录
const isNewRecord = computed(() => {
	if (!Array.isArray(examRecords.value) || examRecords.value.length <= 1) {
		return false; // 第一次测试不算新纪录
	}

	try {
		// 获取历史记录（排除当前这次）
		const historyRecords = examRecords.value.slice(1);
		if (historyRecords.length === 0) {
			return false;
		}

		const validScores = historyRecords
			.filter((record: any) => record && typeof record.score === 'number')
			.map((record: any) => record.score);

		if (validScores.length === 0) {
			return false;
		}

		const historyBestScore = Math.max(...validScores);
		return score.value > historyBestScore;
	} catch (error) {
		console.error('检查新纪录失败:', error);
		return false;
	}
});

// 分数对比样式类
const scoreCompareClass = computed(() => {
	if (scoreDiff.value > 0) return 'score-better';
	if (scoreDiff.value < 0) return 'score-worse';
	return '';
});

// 进步样式类
const progressClass = computed(() => {
	if (scoreProgress.value > 0) return 'progress-up';
	if (scoreProgress.value < 0) return 'progress-down';
	return '';
});

// 最近几次测试分数
const recentScores = computed(() => {
	if (!Array.isArray(examRecords.value)) {
		return [];
	}

	try {
		return examRecords.value
			.slice(0, 5)
			.filter((record: any) => record && typeof record.score === 'number')
			.map((record: any) => record.score);
	} catch (error) {
		console.error('获取最近分数失败:', error);
		return [];
	}
});

// 趋势方向
const trendDirection = computed(() => {
	if (recentScores.value.length < 2) {
		return TrendDirection.STABLE;
	}
	// 比较最近两次的分数
	const current = recentScores.value[0];
	const previous = recentScores.value[1];
	if (current > previous) return TrendDirection.UP;
	if (current < previous) return TrendDirection.DOWN;
	return TrendDirection.STABLE;
});

// 计算属性
const themeStyles = computed(() => getThemeStyles());

// 容器样式（背景渐变）
const containerStyle = computed(() => ({
	background: themeStyles.value.bgGradient
}));

// 安全距离计算（适配刘海屏）
const safeDistance = computed(() => {
	// 基础间距 20px（约等于 40rpx），加上安全区域
	return (uni.getSystemInfoSync().safeAreaInsets?.top || 0) + 20;
});

// 错误数量
const wrongCount = computed(() => {
	return totalCount.value - correctCount.value;
});

// 分数等级配置
const scoreLevelConfig = computed(() => getScoreLevelConfig(score.value));

// 分数表情
const scoreEmoji = computed(() => scoreLevelConfig.value.emoji);

// 分数评价
const scoreComment = computed(() => scoreLevelConfig.value.comment);

// 鼓励文字
const encouragementText = computed(() => scoreLevelConfig.value.encouragement);

// 加载后台数据
const loadBackendData = async () => {
	if (!techCode.value) return;

	loading.value = true;
	try {
		// 获取测试记录列表
		const recordsResult = await getExamRecordsAPI(techCode.value);
		examRecords.value = recordsResult.data || [];

		// 获取统计信息
		const statsResult = await getExamStatisticsAPI();
		examStatistics.value = statsResult.data || {
			totalCount: 0,
			averageScore: 0,
			bestScore: 0,
			averageAccuracy: 0
		};
	} catch (error) {
		console.error('加载后台数据失败:', error);
	} finally {
		loading.value = false;
	}
};

// 生命周期钩子
onLoad((options: any) => {
	score.value = parseInt(options.score || '0');
	correctCount.value = parseInt(options.correctCount || '0');
	totalCount.value = parseInt(options.totalCount || '0');
	accuracy.value = parseInt(options.accuracy || '0');
	timeUsed.value = parseInt(options.timeUsed || '0');
	techCode.value = options.techCode || '';
	categories.value = options.categories || '';

	// 加载题目详情（从临时存储）
	try {
		const questionsData = (uni as any).getStorageSync('current_exam_questions');
		if (questionsData) {
			questionResults.value = JSON.parse(questionsData);
			// 清除临时存储
			(uni as any).removeStorageSync('current_exam_questions');
		}
	} catch (error) {
		console.error('加载题目详情失败:', error);
	}

	// 加载后台数据
	loadBackendData();
});

// 工具方法
const getTechName = (code: string): string => {
	const techMap: Record<string, string> = {
		'java': 'Java',
		'sql': 'SQL',
		'spring': 'Spring',
		'vue': 'Vue.js',
		'typescript': 'TypeScript',
		'mybatis': 'MyBatis',
		'mybatisplus': 'MyBatis-Plus',
		'javascript': 'JavaScript',
		'mysql': 'MySQL',
		'redis': 'Redis',
		'docker': 'Docker'
	};
	return techMap[code] || code;
};

// 格式化时间（分秒）
const formatTime = (seconds: number): string => {
	const mins = Math.floor(seconds / 60);
	const secs = seconds % 60;
	return `${mins}'${secs}"`;
};

// 事件处理方法
const handleGoBack = () => {
	uni.navigateBack();
};

// 返回测试tab页面
const handleBackToTestTab = () => {
	uni.switchTab({
		url: '/pages/exam-records/index'
	});
};

// 返回测试通道列表
const handleBackToList = () => {
	uni.switchTab({
		url: '/pages/technologies/index'
	});
};

// 重新测试
const handleRetry = () => {
	if (techCode.value && categories.value) {
		uni.redirectTo({
			url: `/pages/exam-records/test?channelCode=${techCode.value}&categoryCode=${categories.value}`
		});
	} else {
		// 如果没有参数，返回分类选择页面
		uni.navigateBack();
	}
};

</script>

<style lang="scss" scoped>
.result-container {
	min-height: 100vh;
	padding: 60rpx 32rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	transition: background-color 0.3s ease;
}

/**
	 * 顶部导航栏
	 */
.top-nav {
	position: absolute;
	left: 24rpx;
	right: 24rpx;
	z-index: 10;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.back-button {
	width: 72rpx;
	height: 72rpx;
	background: v-bind('themeStyles.bgCard');
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: v-bind('themeStyles.cardBoxShadow');
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.92);
		box-shadow: v-bind('themeStyles.hoverBoxShadow');
	}
}

.back-icon {
	font-size: 44rpx;
	color: v-bind('themeStyles.textPrimary');
	font-weight: 700;
}

.test-tab-button {
	width: 72rpx;
	height: 72rpx;
	background: v-bind('themeStyles.primaryGradient');
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: v-bind('themeStyles.buttonBoxShadow');
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.92);
		box-shadow: v-bind('themeStyles.hoverBoxShadow');
	}
}

.tab-icon {
	font-size: 36rpx;
	color: white;
}

/**
	 * 结果卡片
	 */
.result-card {
	width: 100%;
	background: v-bind('themeStyles.bgCard');
	border-radius: 32rpx;
	padding: 48rpx 32rpx;
	box-shadow: v-bind('themeStyles.cardBoxShadow');
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 32rpx;
	position: relative;
}

/**
	 * 成绩图标
	 */
.score-icon {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #fff9e6 0%, #ffe9a0 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32rpx;
	box-shadow: 0 8rpx 24rpx rgba(255, 215, 0, 0.3);
}

.icon-text {
	font-size: 72rpx;
}

/**
	 * 分数区域
	 */
.score-section {
	display: flex;
	align-items: baseline;
	gap: 8rpx;
	margin-bottom: 16rpx;
}

.score-label {
	font-size: 28rpx;
	color: v-bind('themeStyles.textSecondary');
	font-weight: 600;
}

.score-value {
	font-size: 96rpx;
	font-weight: 900;
	background: v-bind('themeStyles.primaryGradient');
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
}

.score-unit {
	font-size: 32rpx;
	color: v-bind('themeStyles.textSecondary');
	font-weight: 600;
}

/* 评价 */
.score-comment {
	font-size: 32rpx;
	font-weight: 700;
	color: v-bind('themeStyles.primaryColor');
	margin-bottom: 40rpx;
}

/* 统计网格 */
.stats-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16rpx;
	margin-bottom: 40rpx;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	padding: 20rpx 8rpx;
	background: v-bind('themeStyles.bgSecondary');
	border-radius: 16rpx;
}

.stat-icon {
	font-size: 32rpx;
}

.stat-value {
	font-size: 28rpx;
	font-weight: 800;
	color: v-bind('themeStyles.textPrimary');
}

.stat-label {
	font-size: 20rpx;
	color: v-bind('themeStyles.textSecondary');
	font-weight: 600;
}

/* 进度环 */
.progress-ring {
	width: 200rpx;
	height: 200rpx;
	position: relative;
	margin-top: 20rpx;
}

.ring-bg {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 16rpx solid v-bind('themeStyles.borderColor');
}

.ring-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 16rpx solid transparent;
	border-top-color: v-bind('themeStyles.primaryColor');
	border-right-color: v-bind('themeStyles.primaryColor');
	transform-origin: center;
	transition: transform 1s ease;
}

.ring-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140rpx;
	height: 140rpx;
	background: v-bind('themeStyles.bgCard');
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ring-text {
	font-size: 40rpx;
	font-weight: 900;
	color: v-bind('themeStyles.primaryColor');
}

/* 操作按钮 */
.action-buttons {
	width: 100%;
	display: flex;
	gap: 16rpx;
	margin-bottom: 32rpx;
}

.action-btn {
	flex: 1;
	min-width: 0;
	height: 96rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	border: none;
	box-shadow: v-bind('themeStyles.cardBoxShadow');
	transition: all 0.3s ease;
	padding: 0 16rpx;
	box-sizing: border-box;

	&:active {
		transform: scale(0.97);
	}
}

.secondary-btn {
	background: v-bind('themeStyles.bgCard');
}

.primary-btn {
	background: v-bind('themeStyles.primaryGradient');
}

.btn-icon {
	font-size: 32rpx;
	flex-shrink: 0;
	line-height: 1;
}

.btn-text {
	font-size: 28rpx;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1;
}

.secondary-btn .btn-text {
	color: v-bind('themeStyles.primaryColor');
}

.primary-btn .btn-text {
	color: white;
}

/* 鼓励文字 */
.encouragement {
	text-align: center;
	padding: 24rpx 32rpx;
}

.encouragement-text {
	font-size: 28rpx;
	color: v-bind('themeStyles.textPrimary');
	line-height: 1.6;
	font-weight: 600;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 历史统计卡片 */
.history-stats-card {
	width: 100%;
	background: v-bind('themeStyles.bgCard');
	border-radius: 32rpx;
	padding: 32rpx;
	box-shadow: v-bind('themeStyles.cardBoxShadow');
	margin-bottom: 32rpx;
}

.stats-card-header {
	margin-bottom: 24rpx;
	padding-bottom: 16rpx;
	border-bottom: 2rpx solid v-bind('themeStyles.borderColor');
}

.stats-card-title {
	font-size: 32rpx;
	font-weight: 900;
	color: v-bind('themeStyles.textPrimary');
}

/* 技术栈统计 */
.tech-stats-section {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
	margin-bottom: 24rpx;
}

.tech-stat-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 0;
}

.tech-stat-label {
	font-size: 28rpx;
	color: v-bind('themeStyles.textSecondary');
	font-weight: 600;
}

.tech-stat-value {
	font-size: 28rpx;
	font-weight: 800;
	color: v-bind('themeStyles.textPrimary');
	display: flex;
	align-items: center;
	gap: 8rpx;

	&.highlight {
		color: v-bind('themeStyles.primaryColor');
	}

	&.score-better {
		color: v-bind('themeStyles.successColor');
	}

	&.score-worse {
		color: v-bind('themeStyles.errorColor');
	}

	&.progress-up {
		color: v-bind('themeStyles.successColor');
	}

	&.progress-down {
		color: v-bind('themeStyles.errorColor');
	}
}

.compare-text,
.progress-text {
	font-size: 24rpx;
	font-weight: 700;
}

.new-record {
	font-size: 24rpx;
	margin-left: 8rpx;
}

/* 排名区域 */
.rank-section {
	padding-top: 24rpx;
	border-top: 2rpx solid v-bind('themeStyles.borderColor');
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
}

.rank-badge {
	display: flex;
	align-items: baseline;
	gap: 8rpx;
	padding: 16rpx 32rpx;
	background: v-bind('themeStyles.primaryGradient');
	border-radius: 50rpx;
	box-shadow: v-bind('themeStyles.buttonBoxShadow');
}

.rank-label {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
}

.rank-value {
	font-size: 36rpx;
	font-weight: 900;
	color: white;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.rank-total {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
}

.percentile-info {
	padding: 12rpx 24rpx;
	background: v-bind('themeStyles.bgTertiary');
	border-radius: 24rpx;
}

.percentile-text {
	font-size: 24rpx;
	color: v-bind('themeStyles.primaryColor');
	font-weight: 700;
}

/* 趋势分析 */
.trend-card {
	width: 100%;
	background: v-bind('themeStyles.bgCard');
	border-radius: 32rpx;
	padding: 32rpx;
	box-shadow: v-bind('themeStyles.cardBoxShadow');
	margin-bottom: 32rpx;
}

.trend-content {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.trend-label {
	font-size: 26rpx;
	color: v-bind('themeStyles.textSecondary');
	font-weight: 600;
	text-align: center;
}

.trend-bars {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	gap: 16rpx;
	height: 200rpx;
	padding: 0 16rpx;
}

.trend-bar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	height: 100%;
}

.trend-bar-wrapper {
	flex: 1;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: relative;
}

.trend-bar {
	width: 100%;
	min-height: 20rpx;
	background: v-bind('themeStyles.primaryGradient');
	border-radius: 8rpx 8rpx 0 0;
	transition: height 0.5s ease;
	box-shadow: v-bind('themeStyles.buttonBoxShadow');

	&.trend-bar-current {
		background: v-bind('themeStyles.successGradient');
		box-shadow: 0 4rpx 12rpx rgba(72, 187, 120, 0.4);
	}
}

.trend-bar-value {
	font-size: 24rpx;
	font-weight: 800;
	color: v-bind('themeStyles.textPrimary');
}

.trend-bar-label {
	font-size: 20rpx;
	color: v-bind('themeStyles.textSecondary');
	font-weight: 600;
}

.trend-summary {
	padding-top: 16rpx;
	border-top: 2rpx solid v-bind('themeStyles.borderColor');
	text-align: center;
}

.trend-summary-text {
	font-size: 26rpx;
	font-weight: 700;

	&.trend-up {
		color: v-bind('themeStyles.successColor');
	}

	&.trend-down {
		color: v-bind('themeStyles.errorColor');
	}
}

/* 题目概览卡片 */
.questions-overview-card {
	width: 100%;
	background: v-bind('themeStyles.bgCard');
	border-radius: 32rpx;
	padding: 32rpx;
	box-shadow: v-bind('themeStyles.cardBoxShadow');
	margin-bottom: 32rpx;
}

.overview-summary {
	font-size: 24rpx;
	color: v-bind('themeStyles.textSecondary');
	font-weight: 600;
	margin-top: 8rpx;
	display: block;
}

.questions-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16rpx;
	margin-top: 24rpx;
}

.question-item {
	padding: 16rpx;
	border-radius: 16rpx;
	border: 2rpx solid transparent;
	background: v-bind('themeStyles.bgSecondary');
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	min-height: 0;

	&.question-correct {
		border-color: v-bind('themeStyles.successColor');
		background: linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(56, 161, 105, 0.05) 100%);
	}

	&.question-wrong {
		border-color: v-bind('themeStyles.errorColor');
		background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
	}
}

.question-item-header {
	display: flex;
	align-items: flex-start;
	gap: 8rpx;
	margin-bottom: 10rpx;
}

.question-number {
	width: 40rpx;
	height: 40rpx;
	background: v-bind('themeStyles.bgTertiary');
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.number-text {
	font-size: 22rpx;
	font-weight: 800;
	color: v-bind('themeStyles.textPrimary');
}

.question-status-icon {
	flex-shrink: 0;
	width: 32rpx;
	height: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.status-icon {
	font-size: 26rpx;
	line-height: 1;
}

.question-content {
	flex: 1;
	min-width: 0;
}

.question-text {
	font-size: 24rpx;
	font-weight: 600;
	color: v-bind('themeStyles.textPrimary');
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.question-answers {
	margin-top: 10rpx;
	padding-top: 10rpx;
	border-top: 1rpx solid v-bind('themeStyles.borderColor');
	display: flex;
	flex-direction: column;
	gap: 6rpx;
}

.answer-row {
	display: flex;
	align-items: flex-start;
	gap: 8rpx;
	flex-wrap: wrap;
}

.answer-label {
	font-size: 20rpx;
	font-weight: 600;
	color: v-bind('themeStyles.textSecondary');
	flex-shrink: 0;
	line-height: 1.4;
}

.answer-tags {
	display: flex;
	gap: 6rpx;
	flex-wrap: wrap;
	flex: 1;
	min-width: 0;
}

.answer-tag {
	padding: 4rpx 12rpx;
	border-radius: 100rpx;
	font-size: 20rpx;
	font-weight: 700;
	min-width: 40rpx;
	text-align: center;
	line-height: 1.4;
	white-space: nowrap;
}

.correct-tag {
	background: v-bind('themeStyles.successGradient');
	color: white;
	box-shadow: 0 2rpx 8rpx rgba(72, 187, 120, 0.3);
}

.wrong-tag {
	background: v-bind('themeStyles.errorGradient');
	color: white;
	box-shadow: 0 2rpx 8rpx rgba(239, 68, 68, 0.3);
}

.no-answer {
	background: v-bind('themeStyles.bgTertiary');
	color: v-bind('themeStyles.textSecondary');
	font-style: italic;
}
</style>